<template>
  <div class="box">
    <div class="box_left">
      <el-row class="is-back-padding" style="padding-top: 10px">
        <el-form
          :model="formData"
          size="mini"
          label-width="100px"
          style="width: 100%; display: flex; justify-content: space-around"
        >
          <el-col :span="11">
            <el-form-item label="银行">
              <el-input
                v-model="formData.jilubianhao"
                placeholder="请输入银行"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="税号">
              <el-input
                v-model="formData.shuihao"
                placeholder="请输入税号"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="税率">
              <el-select
                v-model="formData.shuihlv"
                placeholder="请选择税率"
                :style="{ width: '40%' }"
              >
                <el-option
                  v-for="(item, index) in listOptions.ShuilvOptions"
                  :key="index"
                  :label="item.Name"
                  :value="item.ID"
                ></el-option>
              </el-select>
              &nbsp;
              <el-checkbox v-model="SLchecked" size="small"></el-checkbox>
              <el-input
                v-model="formData.shuihlv2"
                placeholder="税率2"
                :style="{ width: '20%' }"
              >
              </el-input>
              %
              <el-checkbox v-model="SLchecked2"></el-checkbox>
            </el-form-item>
            <el-form-item label="开票地址">
              <el-input
                type="textarea"
                v-model="formData.kaipiaodih"
                placeholder="请输入开票地址"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="银行账号">
              <el-input
                v-model="formData.xioadjfisd"
                placeholder="请输入银行账号"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="许可证">
              <el-input
                v-model="formData.xukezheng"
                placeholder="请输入许可证"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="电话号码">
              <el-input
                v-model="formData.phone"
                placeholder="请输入电话号码"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                type="textarea"
                v-model="formData.beizhu"
                placeholder="请输入备注"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>
import ValidateMixin from "@/mixins/ValidateMixin.js";
/**
 * 表单校验
 */
let REQUIRED_PORP_LIST1 = [
  {
    label: "税票信息-银行",
    prop: "jilubianhao",
  },
  {
    label: "税票信息-银行账号",
    prop: "xioadjfisd",
  },
];

export default {
  name: "tab3",
  mixins: [ValidateMixin],
  data() {
    return {
      formData: {
        jilubianhao: "",
        shuihao: "",
        shuihlv: "",
        shuihlv2: "",
        kaipiaodih: "",
        xioadjfisd: "",
        xukezheng: "",
        phone: "",
        beizhu: "",
      },
      SLchecked: false,
      SLchecked2: false,
      listOptions: {
        ShuilvOptions: [
          {
            ID: "VAT 16",
            Nmae: "VAT 16",
          },
          {
            ID: "VAT 10",
            Nmae: "VAT 10",
          },
          {
            ID: "VAT 9",
            Nmae: "VAT 9",
          },
          {
            ID: "VAT 6",
            Nmae: "VAT 6",
          },
          {
            ID: "VAT 3",
            Nmae: "VAT 3",
          },
          {
            ID: "其他",
            Nmae: "其他",
          },
        ],
      },
    };
  },
  methods: {
    //校验必填
    verify_required() {
      return this.$validateForm(this.formData, REQUIRED_PORP_LIST1);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
}
</style>
